import { App, Button, Space, Switch, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import "../../style/updata/index.css";
import "./articleclass.css";
type Props = {};
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const articleclass = (props: Props) => {
  const { message } = App.useApp();

  const showMessage = () => {
    message.success("Success!");
  };

  const onChange = (checked: boolean) => {
    console.log(`switch to ${checked}`);
  };

  const columns: ColumnsType<DataType> = [
    {
      title: "ID",
      dataIndex: "age",
      key: "age",
      render: (text) => <span>{text}</span>,
    },
    {
      title: "项目名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "栏目别名",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "排序",
      key: "tags",
      dataIndex: "tags",
    },
    {
      title: "状态",
      render: (falg: boolean, render: any) => (
        <>
          <Switch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            defaultChecked
            onChange={onChange}
            className="custom-switch"
            onClick={showMessage}
          />
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            style={{
              background: "#009688",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            添加子栏目
          </Button>

          <Button
            style={{
              background: "#1E9FFF",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            编辑
          </Button>
          <Button
            style={{
              background: "#FF5722",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      name: "斗罗大陆",
      age: 12,
      address: "New York No. 1 Lake Park",
      tags: ["255"],
    },
    {
      key: "2",
      name: "梅西",
      age: 9,
      address: "London No. 1 Lake Park",
      tags: ["255"],
    },
    {
      key: "3",
      name: "杰克",
      age: 3,
      address: "Sydney No. 1 Lake Park",
      tags: ["255"],
    },
    {
      key: "4",
      name: "高哥",
      age: 4,
      address: "New York No. 1 Lake Park",
      tags: ["255"],
    },
    {
      key: "5",
      name: "中国经济网-房产咨询",
      age: 5,
      address: "London No. 1 Lake Park",
      tags: ["255"],
    },
    {
      key: "6",
      name: "中国经济网-智慧城市",
      age: 6,
      address: "Sydney No. 1 Lake Park",
      tags: ["255"],
    },
  ];
  return (
    <div>
      <div style={{ display: "flex" }}>
        <button className="addMcid">添加项目</button>
      </div>
      <Table
        bordered={true}
        columns={columns}
        dataSource={data}
        style={{ padding: "15px" }}
      />
      ;
    </div>
  );
};

export default articleclass;
